<template>
  <div class="edit">
    <!-- <h1>你好,我是问卷调查下面的子路由,编辑问卷...</h1> -->
    <el-container>
      <el-aside class="main" width="15vw">
        <div class="main-a">
          <h1>添加题目</h1>
          <div class="main-a-a">
            <h4>选择题</h4>
            <el-row>
              <el-col :span="12">
                <el-card shadow="hover" class="el-col">
                  <h4
                    class="iconfont icon-danxuanxuanzhong"
                    @click="addClick('radio')"
                  >
                    单选题
                  </h4>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card shadow="hover" class="el-col">
                  <h4
                    class="iconfont icon-checkbox-checked"
                    @click="addClick('multiple')"
                  >
                    多选题
                  </h4>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card shadow="hover" class="el-col">
                  <h4
                    class="iconfont icon-checkbox-checked"
                    @click="addClick('select')"
                  >
                    下拉选择
                  </h4>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card shadow="hover" class="el-col">
                  <h4
                    class="iconfont icon-tupiandanxuan"
                    @click="addClick('imgSingle')"
                  >
                    图片单选
                  </h4>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <div class="main-a-a">
            <h4>填空简答题</h4>
            <el-row>
              <el-col :span="12">
                <el-card shadow="hover" class="el-col">
                  <h4
                    class="iconfont icon-plus-blanksfill"
                    @click="addClick('completion')"
                  >
                    填空题
                  </h4>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card shadow="hover" class="el-col">
                  <h4 class="iconfont icon-jianda" @click="addClick('field')">
                    简答题
                  </h4>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card shadow="hover" class="el-col">
                  <h4 class="iconfont icon-shuzi" @click="addClick('number')">
                    &nbsp;数字
                  </h4>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <!--个人信息-->
          <div class="main-a-a">
            <h4>个人信息</h4>
            <el-row>
              <el-col :span="12">
                <el-card shadow="hover" class="el-col">
                  <h4 class="iconfont icon-xingming" @click="addClick('name')">
                    姓名
                  </h4>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card shadow="hover" class="el-col">
                  <h4 class="iconfont icon-xingbie" @click="addClick('gender')">
                    性别
                  </h4>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card shadow="hover" class="el-col">
                  <h4
                    class="iconfont icon-shengri"
                    @click="addClick('birthday')"
                  >
                    生日
                  </h4>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card shadow="hover" class="el-col">
                  <h4 class="iconfont icon-nianling" @click="addClick('age')">
                    年龄范围
                  </h4>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card shadow="hover" class="el-col">
                  <h4
                    class="iconfont icon-xueli"
                    @click="addClick('education')"
                  >
                    学历
                  </h4>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card shadow="hover" class="el-col">
                  <h4 class="iconfont icon-dianhua" @click="addClick('iphone')">
                    手机
                  </h4>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card shadow="hover" class="el-col">
                  <h4 class="iconfont icon-youxiang" @click="addClick('email')">
                    邮箱
                  </h4>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card shadow="hover" class="el-col">
                  <h4 class="iconfont icon-phone" @click="addClick('mobile')">
                    电话
                  </h4>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-aside>
      <el-main class="middle" width="85vw">
        <!-- 组件的位置 -->
        <div class="left">
          <div class="left_scroll">
            <div class="bs">
              <!-- 图片 -->
              <div class="left-img"></div>
              <div class="main-b-b-title">
                <el-input
                  v-model="formData.form_name"
                  placeholder="请输入内容"
                  id="title"
                  maxlength="60"
                ></el-input>
                <!-- 最多只能填写60个字的题目  maxlength-->
                <!-- <h1>{{formData.form_name.length}}</h1> -->
                <el-input
                  type="textarea"
                  :rows="5"
                  placeholder="请输入内容"
                  v-model="formData.form_tips"
                ></el-input>
                <h6 style="float: right">
                  可输入文字:{{ formData.form_tips.length }}/10000
                </h6>
              </div>
              <!-- 这里修改成为div  拖动div效果 -->
              <vuedraggable class="wrapper" v-model="formData.form_text">
                <div
                  class="form-head-show"
                  v-for="(item, i) in formData.form_text"
                  :key="i"
                  @click="itemClick(i)"
                  :class="{ bor: clicked == i }"
                >
                  <!--实现div的拖动-->
                  <!-- 单选的div -->
                  <div v-if="item.type == 'radio'">
                    <h3>
                      <strong style="color: red">*</strong>{{ item.title }}
                    </h3>
                    <!-- 绑定字体的颜色-->
                    <h5 v-bind:style="[item.tips_color]">{{ item.tips }}</h5>
                    <ul
                      v-for="(item, key) in item.option"
                      :key="key"
                      :label="key"
                    >
                      <el-radio-group>
                        <el-radio disabled>{{ item.text }}</el-radio>
                      </el-radio-group>
                    </ul>
                    <br />
                    <!-- 根据i来删除data中的数据 -->
                    <el-popover
                      placement="bottom"
                      title="删除"
                      width="150"
                      trigger="hover"
                      content="确认想删除此数据?"
                    >
                      <el-button slot="reference" class="el_btn"
                        ><i class="el-icon-delete" @click="remove(i)"></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="上移"
                      width="150"
                      trigger="hover"
                      content="确认想上移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-top"
                          @click="moveup(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="下移"
                      width="150"
                      trigger="hover"
                      content="确认想下移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-bottom"
                          @click="movedown(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                  </div>
                  <!-- 多选的div -->
                  <div v-else-if="item.type == 'multiple'">
                    <h3>
                      <strong style="color: red">*</strong>{{ item.title }}
                    </h3>
                    <!-- 绑定颜色 -->
                    <h5 v-bind:style="[item.tips_color]">{{ item.tips }}</h5>
                    <ul
                      v-for="(item, key) in item.option"
                      :key="key"
                      :label="key"
                    >
                      <el-checkbox-group>
                        <el-checkbox v-if="item.text != undefined" disabled>{{
                          item.text
                        }}</el-checkbox>
                      </el-checkbox-group>
                    </ul>
                    <br />
                    <el-popover
                      placement="bottom"
                      title="删除"
                      width="150"
                      trigger="hover"
                      content="确认想删除此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-delete"
                          @click="remove(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="上移"
                      width="150"
                      trigger="hover"
                      content="确认想上移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-top"
                          @click="moveup(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="下移"
                      width="150"
                      trigger="hover"
                      content="确认想下移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-bottom"
                          @click="movedown(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                  </div>
                  <!--下拉选择-->
                  <div v-else-if="item.type == 'select'">
                    <h3>
                      <strong style="color: red">*</strong>{{ item.title }}
                    </h3>
                    <!-- 绑定字体的颜色-->
                    <h5 v-bind:style="[item.tips_color]">{{ item.tips }}</h5>
                    <el-select placeholder="请选择" v-model="value">
                      <el-option
                        v-for="item in item.option"
                        :key="item.txet"
                        :label="item.text"
                        :value="item.text"
                      >
                        <!--<h1>{{item.text}}</h1>-->
                      </el-option>
                    </el-select>
                    <br />
                    <!-- 根据i来删除data中的数据 -->
                    <el-popover
                      placement="bottom"
                      title="删除"
                      width="150"
                      trigger="hover"
                      content="确认想删除此数据?"
                    >
                      <el-button slot="reference" class="el_btn"
                        ><i class="el-icon-delete" @click="remove(i)"></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="上移"
                      width="150"
                      trigger="hover"
                      content="确认想上移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-top"
                          @click="moveup(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="下移"
                      width="150"
                      trigger="hover"
                      content="确认想下移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-bottom"
                          @click="movedown(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                  </div>
                  <!-- 填空的div -->
                  <div v-else-if="item.type == 'completion'">
                    <h3>
                      <strong style="color: red">*</strong>{{ item.title }}
                    </h3>
                    <!-- 绑定颜色 -->
                    <h5 v-bind:style="[item.tips_color]">{{ item.tips }}</h5>
                    <el-row>
                      <el-input v-model="item.option.def" disabled />
                    </el-row>
                    <br />
                    <el-popover
                      placement="bottom"
                      title="删除"
                      width="150"
                      trigger="hover"
                      content="确认想删除此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-delete"
                          @click="remove(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="上移"
                      width="150"
                      trigger="hover"
                      content="确认想上移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-top"
                          @click="moveup(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="下移"
                      width="150"
                      trigger="hover"
                      content="确认想下移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-bottom"
                          @click="movedown(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                  </div>
                  <!-- 简答题 -->
                  <div v-else-if="item.type == 'field'">
                    <h3>
                      <strong style="color: red">*</strong>{{ item.title }}
                    </h3>
                    <!-- 绑定颜色 -->
                    <h5 v-bind:style="[item.tips_color]">{{ item.tips }}</h5>
                    <el-row>
                      <el-input
                        type="textarea"
                        v-model="item.option.def"
                        disabled
                      />
                    </el-row>
                    <br />
                    <el-popover
                      placement="bottom"
                      title="删除"
                      width="150"
                      trigger="hover"
                      content="确认想删除此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-delete"
                          @click="remove(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="上移"
                      width="150"
                      trigger="hover"
                      content="确认想上移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-top"
                          @click="moveup(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="下移"
                      width="150"
                      trigger="hover"
                      content="确认想下移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-bottom"
                          @click="movedown(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                  </div>
                  <!-- 数字 -->
                  <div v-else-if="item.type == 'number'">
                    <h3>
                      <strong style="color: red">*</strong>{{ item.title }}
                    </h3>
                    <!-- 绑定颜色 -->
                    <h5 v-bind:style="[item.tips_color]">{{ item.tips }}</h5>
                    <el-row>
                      <el-input
                        type="textarea"
                        v-model="item.option.def"
                        disabled
                      />
                    </el-row>
                    <br />
                    <el-popover
                      placement="bottom"
                      title="删除"
                      width="150"
                      trigger="hover"
                      content="确认想删除此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-delete"
                          @click="remove(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="上移"
                      width="150"
                      trigger="hover"
                      content="确认想上移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-top"
                          @click="moveup(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="下移"
                      width="150"
                      trigger="hover"
                      content="确认想下移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-bottom"
                          @click="movedown(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                  </div>
                  <!-- 图片单选 -->
                  <div v-else-if="item.type == 'imgSingle'">
                    <h3>
                      <strong style="color: red">*</strong>{{ item.title }}
                    </h3>
                    <!-- 绑定颜色 -->
                    <h5 v-bind:style="[item.tips_color]">{{ item.tips }}</h5>
                    <!--这里拼接的是后端照片地址 :src-->
                    <!-- 图片单选的-->
                    <div class="left_imgs">
                      <div v-for="(item1, index1) in item.option" :key="index1">
                        <!-- this.$root.imgsurl  http://47.106.246.177:8080 -->
                        <img
                          :src="imgsUrl + item1.imageUrl"
                          width="80px"
                          height="140px"
                        />
                        <br />
                        <el-radio-group>
                          <el-radio disabled :label="index1 + 1"></el-radio>
                        </el-radio-group>
                      </div>
                    </div>
                    <br />
                    <el-popover
                      placement="bottom"
                      title="删除"
                      width="150"
                      trigger="hover"
                      content="确认想删除此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-delete"
                          @click="remove(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="上移"
                      width="150"
                      trigger="hover"
                      content="确认想上移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-top"
                          @click="moveup(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="下移"
                      width="150"
                      trigger="hover"
                      content="确认想下移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-bottom"
                          @click="movedown(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                  </div>
                  <!--姓名 类似填空-->
                  <div v-else-if="item.type == 'name'">
                    <h3>
                      <strong style="color: red">*</strong>{{ item.title }}
                    </h3>
                    <!-- 绑定颜色 -->
                    <h5 v-bind:style="[item.tips_color]">{{ item.tips }}</h5>
                    <el-row>
                      <el-input
                        type="textarea"
                        v-model="item.option.def"
                        disabled
                      />
                    </el-row>
                    <br />
                    <el-popover
                      placement="bottom"
                      title="删除"
                      width="150"
                      trigger="hover"
                      content="确认想删除此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-delete"
                          @click="remove(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="上移"
                      width="150"
                      trigger="hover"
                      content="确认想上移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-top"
                          @click="moveup(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="下移"
                      width="150"
                      trigger="hover"
                      content="确认想下移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-bottom"
                          @click="movedown(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                  </div>
                  <!--性别 类似单选-->
                  <div v-else-if="item.type == 'gender'">
                    <h3>
                      <strong style="color: red">*</strong>{{ item.title }}
                    </h3>
                    <!-- 绑定字体的颜色-->
                    <h5 v-bind:style="[item.tips_color]">{{ item.tips }}</h5>
                    <ul
                      v-for="(item, key) in item.option"
                      :key="key"
                      :label="key"
                    >
                      <el-radio-group>
                        <el-radio disabled>{{ item.text }}</el-radio>
                      </el-radio-group>
                    </ul>
                    <br />
                    <!-- 根据i来删除data中的数据 -->
                    <el-popover
                      placement="bottom"
                      title="删除"
                      width="150"
                      trigger="hover"
                      content="确认想删除此数据?"
                    >
                      <el-button slot="reference" class="el_btn"
                        ><i class="el-icon-delete" @click="remove(i)"></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="上移"
                      width="150"
                      trigger="hover"
                      content="确认想上移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-top"
                          @click="moveup(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="下移"
                      width="150"
                      trigger="hover"
                      content="确认想下移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-bottom"
                          @click="movedown(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                  </div>
                  <!--生日-->
                  <!--年龄 age 类似单选-->
                  <div v-else-if="item.type == 'age'">
                    <h3>
                      <strong style="color: red">*</strong>{{ item.title }}
                    </h3>
                    <!-- 绑定字体的颜色-->
                    <h5 v-bind:style="[item.tips_color]">{{ item.tips }}</h5>
                    <ul
                      v-for="(item, key) in item.option"
                      :key="key"
                      :label="key"
                    >
                      <el-radio-group>
                        <el-radio disabled>{{ item.text }}</el-radio>
                      </el-radio-group>
                    </ul>
                    <br />
                    <!-- 根据i来删除data中的数据 -->
                    <el-popover
                      placement="bottom"
                      title="删除"
                      width="150"
                      trigger="hover"
                      content="确认想删除此数据?"
                    >
                      <el-button slot="reference" class="el_btn"
                        ><i class="el-icon-delete" @click="remove(i)"></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="上移"
                      width="150"
                      trigger="hover"
                      content="确认想上移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-top"
                          @click="moveup(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="下移"
                      width="150"
                      trigger="hover"
                      content="确认想下移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-bottom"
                          @click="movedown(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                  </div>
                  <!--学历 类似单选 education-->
                  <div v-else-if="item.type == 'education'">
                    <h3>
                      <strong style="color: red">*</strong>{{ item.title }}
                    </h3>
                    <!-- 绑定字体的颜色-->
                    <h5 v-bind:style="[item.tips_color]">{{ item.tips }}</h5>
                    <ul
                      v-for="(item, key) in item.option"
                      :key="key"
                      :label="key"
                    >
                      <el-radio-group>
                        <el-radio disabled>{{ item.text }}</el-radio>
                      </el-radio-group>
                    </ul>
                    <br />
                    <!-- 根据i来删除data中的数据 -->
                    <el-popover
                      placement="bottom"
                      title="删除"
                      width="150"
                      trigger="hover"
                      content="确认想删除此数据?"
                    >
                      <el-button slot="reference" class="el_btn"
                        ><i class="el-icon-delete" @click="remove(i)"></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="上移"
                      width="150"
                      trigger="hover"
                      content="确认想上移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-top"
                          @click="moveup(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="下移"
                      width="150"
                      trigger="hover"
                      content="确认想下移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-bottom"
                          @click="movedown(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                  </div>
                  <!--手机 类似填空-->
                  <div v-else-if="item.type == 'iphone'">
                    <h3>
                      <strong style="color: red">*</strong>{{ item.title }}
                    </h3>
                    <!-- 绑定颜色 -->
                    <h5 v-bind:style="[item.tips_color]">{{ item.tips }}</h5>
                    <el-row>
                      <el-input
                        type="textarea"
                        v-model="item.option.def"
                        disabled
                      />
                    </el-row>
                    <br />
                    <el-popover
                      placement="bottom"
                      title="删除"
                      width="150"
                      trigger="hover"
                      content="确认想删除此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-delete"
                          @click="remove(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="上移"
                      width="150"
                      trigger="hover"
                      content="确认想上移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-top"
                          @click="moveup(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="下移"
                      width="150"
                      trigger="hover"
                      content="确认想下移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-bottom"
                          @click="movedown(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                  </div>
                  <!--邮箱 类似填空 但是需要弄邮箱验证 email-->
                  <div v-else-if="item.type == 'email'">
                    <h3>
                      <strong style="color: red">*</strong>{{ item.title }}
                    </h3>
                    <!-- 绑定颜色 -->
                    <h5 v-bind:style="[item.tips_color]">{{ item.tips }}</h5>
                    <el-row>
                      <el-input
                        type="textarea"
                        v-model="item.option.def"
                        disabled
                      />
                    </el-row>
                    <br />
                    <el-popover
                      placement="bottom"
                      title="删除"
                      width="150"
                      trigger="hover"
                      content="确认想删除此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-delete"
                          @click="remove(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="上移"
                      width="150"
                      trigger="hover"
                      content="确认想上移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-top"
                          @click="moveup(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="下移"
                      width="150"
                      trigger="hover"
                      content="确认想下移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-bottom"
                          @click="movedown(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                  </div>
                  <!--电话 类似手机-->
                  <div v-else-if="item.type == 'mobile'">
                    <h3>
                      <strong style="color: red">*</strong>{{ item.title }}
                    </h3>
                    <!-- 绑定颜色 -->
                    <h5 v-bind:style="[item.tips_color]">{{ item.tips }}</h5>
                    <el-row>
                      <el-input
                        type="textarea"
                        v-model="item.option.def"
                        disabled
                      />
                    </el-row>
                    <br />
                    <el-popover
                      placement="bottom"
                      title="删除"
                      width="150"
                      trigger="hover"
                      content="确认想删除此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-delete"
                          @click="remove(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="上移"
                      width="150"
                      trigger="hover"
                      content="确认想上移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-top"
                          @click="moveup(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="下移"
                      width="150"
                      trigger="hover"
                      content="确认想下移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-bottom"
                          @click="movedown(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                  </div>
                  <!--生日 birthday 类似填空-->
                  <div v-else-if="item.type == 'birthday'">
                    <h3>
                      <strong style="color: red">*</strong>{{ item.title }}
                    </h3>
                    <!-- 绑定颜色 -->
                    <h5 v-bind:style="[item.tips_color]">{{ item.tips }}</h5>
                    <el-row>
                      <el-input
                        type="textarea"
                        v-model="item.option.def"
                        disabled
                      />
                    </el-row>
                    <br />
                    <el-popover
                      placement="bottom"
                      title="删除"
                      width="150"
                      trigger="hover"
                      content="确认想删除此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-delete"
                          @click="remove(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="上移"
                      width="150"
                      trigger="hover"
                      content="确认想上移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-top"
                          @click="moveup(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                    <el-popover
                      placement="bottom"
                      title="下移"
                      width="150"
                      trigger="hover"
                      content="确认想下移此数据?"
                    >
                      <el-button slot="reference"
                        ><i
                          style="width: 30px"
                          class="el-icon-bottom"
                          @click="movedown(i)"
                        ></i
                      ></el-button>
                    </el-popover>
                  </div>
                </div>
              </vuedraggable>
              <!-- 提交的按钮 -->
              <el-button class="button" type="primary" @click="cs"
                >提交</el-button
              >
            </div>
            <!--白色-->
          </div>
        </div>
        <!-- 修改的位置 -->
        <div class="right">
          <div>
            <rightsingle v-if="obj.type == 'radio'" :data="obj" />
            <rightmultiple v-if="obj.type == 'multiple'" :data="obj" />
            <rightcompletion v-if="obj.type == 'completion'" :data="obj" />
            <rightfield v-if="obj.type == 'field'" :data="obj" />
            <rightnumber v-if="obj.type == 'number'" :data="obj" />
            <rightselect v-if="obj.type == 'select'" :data="obj" />
            <rightimgsingle
              v-if="obj.type == 'imgSingle'"
              :data="obj"
              @addpush="update"
            />
            <rightname v-if="obj.type == 'name'" :data="obj" />
            <rightgender v-if="obj.type == 'gender'" :data="obj" />
            <righteducation v-if="obj.type == 'education'" :data="obj" />
            <rightage v-if="obj.type == 'age'" :data="obj" />
            <rightiphone v-if="obj.type == 'iphone'" :data="obj" />
            <rightemail v-if="obj.type == 'email'" :data="obj" />
            <rightmobile v-if="obj.type == 'mobile'" :data="obj" />
            <rightbirthday v-if="obj.type == 'birthday'" :data="obj" />
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
// 加载vuedraggable   div的拖动效果
import vuedraggable from "vuedraggable";
import axios from "axios";
import { submit } from "../../../network/index";
import Rightiphone from "../rightAssembly/rightiphone.vue";
export default {
  name: "edit",
  data() {
    return {
      value: "",
      imgsUrl: "",
      // 样式的唯一标识
      clicked: -1,
      obj: {}, // 记录当前编辑对象
      formSign: [false], //各个元素是否处于编辑状态
      // 数据封装
      formData: {
        form_name: "未命名问卷",
        form_tips:
          "非常感谢您能够参加调查，提供您的看法与意见，希望能够得到您的大力支持与合作。我们极其重视数据安全，绝不会泄露任何您的隐私信息。现在我们就马上开始吧！",
        form_type: 1,
        form_text: [],
      },
    };
  },
  // 计算属性
  computed: {},
  // 方法
  methods: {
    // 更新单选图片的照片
    update(data) {
      console.log(this.obj);
      this.obj.option.push({
        imageUrl: data,
        text: "选项文本",
      });
      // console.log(this.formData)
    },

    // 左边的所有添加的方法
    addClick(str) {
      // 左侧单选点击事件
      let item = {
        type: str,
        required: "1",
        hide: "0",
        title: "标题",
        tips: "提示",
        // 加了个{}   类型从字符串修改成为了对象
        tips_color: { color: "rgba(255, 8, 8, 0.8)" },
      };
      // this.formSign.push(false);
      if (str == "radio") {
        let option = [
          {
            text: "选项文本1",
            isText: "0",
          },
          {
            text: "选项文本2",
            isText: "0",
          },
          {
            text: "选项文本3",
            isText: "0",
          },
          {
            text: "选项文本4",
            isText: "0",
          },
        ];
        item.option = option;
        this.formData.form_text.push(item);
      } else if (str == "multiple") {
        let option = [
          {
            min: "1", //最小选选项 默认1
            max: "4", //最大选选项 默认该选项数量
          }, //注意，这个一点要在选项文本（text isText）之前，不然后端会处理数据出错
          {
            text: "选项文本1",
            isText: "0",
          },
          {
            text: "选项文本2",
            isText: "0",
          },
          {
            text: "选项文本3",
            isText: "0",
          },
          {
            text: "选项文本4",
            isText: "0",
          },
        ];
        item.option = option;
        this.formData.form_text.push(item);
      } else if (str == "completion") {
        let option = {
          def: "默认值",
          placeholder: "占位符",
          min: "1", //最少填写字符个数
          max: "4", //最大不超过250字符
        };
        item.option = option;
        this.formData.form_text.push(item);
        // console.log("111");
      } else if (str == "field") {
        let option = {
          def: "默认值",
          placeholder: "占位符",
          min: "1", //最少填写字符个数
          max: "4", //最大不超过250字符
        };
        item.option = option;
        this.formData.form_text.push(item);
      } else if (str == "number") {
        let option = {
          def: 123,
          placeholder: "占位符",
          min: "1", //最少填写字符个数
          max: "4", //最大不超过250字符
        };

        item.option = option;
        this.formData.form_text.push(item);
      } else if (str == "imgSingle") {
        let option = [];
        item.option = option;
        this.formData.form_text.push(item);
      } else if (str == "name") {
        let option = {
          def: "默认值",
          placeholder: "占位符",
          min: "1", //最少填写字符个数
          max: "4", //最大不超过250字符
        };
        item.option = option;
        this.formData.form_text.push(item);
      } else if (str == "gender") {
        let option = [
          {
            text: "男",
            isText: "0",
          },
          {
            text: "女",
            isText: "0",
          },
          {
            text: "不想透露",
            isText: "0",
          },
        ];
        item.option = option;
        this.formData.form_text.push(item);
      } else if (str == "education") {
        let option = [
          {
            text: "初中及以下",
            isText: "0",
          },
          {
            text: "高中/中专/技校",
            isText: "0",
          },
          {
            text: "大学专科",
            isText: "0",
          },
          {
            text: "大学本科",
            isText: "0",
          },
          {
            text: "硕士及以上",
            isText: "0",
          },
        ];
        item.option = option;
        this.formData.form_text.push(item);
      } else if (str == "age") {
        let option = [
          {
            text: "18岁以下",
            isText: "0",
          },
          {
            text: "18~25",
            isText: "0",
          },
          {
            text: "26~30",
            isText: "0",
          },
          {
            text: "31~40",
            isText: "0",
          },
          {
            text: "41~50",
            isText: "0",
          },
          {
            text: "51~60",
            isText: "0",
          },
          {
            text: "60以上",
            isText: "0",
          },
        ];
        item.option = option;
        this.formData.form_text.push(item);
      } else if (str == "iphone") {
        let option = {
          def: "默认值",
          placeholder: "占位符",
          min: "1", //最少填写字符个数
          max: "4", //最大不超过250字符
        };
        item.option = option;
        this.formData.form_text.push(item);
      } else if (str == "email") {
        let option = {
          def: "默认值",
          placeholder: "占位符",
          min: "1", //最少填写字符个数
          max: "4", //最大不超过250字符
        };
        item.option = option;
        this.formData.form_text.push(item);
      } else if (str == "mobile") {
        let option = {
          def: "默认值",
          placeholder: "占位符",
          min: "1", //最少填写字符个数
          max: "4", //最大不超过250字符
        };
        item.option = option;
        this.formData.form_text.push(item);
      } else if (str == "select") {
        let option = [
          {
            text: "选项文本1",
            defaultValue: "默认选择文案",
          },
          {
            text: "选项文本2",
            defaultValue: "默认选择文案",
          },
          {
            text: "选项文本3",
            defaultValue: "默认选择文案",
          },
          {
            text: "选项文本4",
            defaultValue: "默认选择文案",
          },
        ];
        item.option = option;
        this.formData.form_text.push(item);
      } else if (str == "birthday") {
        let option = {
          def: "默认值",
          placeholder: "占位符",
          min: "1", //最少填写字符个数
          max: "4", //最大不超过250字符
        };
        item.option = option;
        this.formData.form_text.push(item);
      }
    },
    itemClick(i) {
      // 中间表单组件点击事件
      this.$set(this.formSign, i, false);
      this.obj = this.formData.form_text[i];
      this.index = i;
      // 动态修改绑定的样式
      this.clicked = i;
      // console.log(i)
    },
    // 交换数组内的元素
    // 向上移动  i就是index  进行数组位置的交换
    moveup: function (i) {
      // 如果i=0就证明是首页,第一个,就不能向上移动
      if (i != 0) {
        var tempOption = this.formData.form_text[i - 1];
        this.$set(this.formData.form_text, i - 1, this.formData.form_text[i]);
        this.$set(this.formData.form_text, i, tempOption);
        this.$message({
          message: "恭喜你，向上移动成功",
          type: "success",
        });
      } else {
        this.$message({
          message: "警告哦，不能向上移动",
          type: "warning",
        });
      }
    },
    // 向下移动
    movedown: function (i) {
      // 如果这个索引index,是这个数组中的最后一个,就不允许执行这个方法
      if (i < this.formData.form_text.length - 1) {
        var tempOption = this.formData.form_text[i + 1];
        this.$set(this.formData.form_text, i + 1, this.formData.form_text[i]);
        this.$set(this.formData.form_text, i, tempOption);
        this.$message({
          message: "恭喜你，向下移动成功",
          type: "success",
        });
      } else {
        this.$message({
          message: "警告哦，不能向下移动",
          type: "warning",
        });
      }
    },
    // 删除的方法
    remove: function (i) {
      //根据i删除数组中的数据  不能删除div里面的最后一个 还没有解决的bug 删除数组
      if (i < this.formData.form_text.length - 1) {
        this.formData.form_text.splice(i, 1);
        // console.log(i);
        this.$message({
          message: "恭喜你，删除成功",
          type: "success",
        });
      } else {
        this.$message({
          message: "警告哦，不能删除这个",
          type: "warning",
        });
      }
    },
    cs: function () {
      // console.log(this.formData.form_text.length);
      if (this.formData.form_text.length > 0) {
        submit(this.formData).then((res) => {
          if (res != null) {
            // console.log(res.data);
            this.$message({
              message: "恭喜你,问卷创建成功!",
              type: "success",
            });
            this.$router.push("/personalcenter");
          } 
        });
      }else{
            this.$message({
              message: "问卷创建失败,请重新创建问卷!",
              type: "warning",
            });
      }
    },
    // 点击出现背景的方法
  },
  computed: {},
  // 加载组件
  components: {
    vuedraggable, //拖动div的插件
    // 右边的组件
    rightsingle: () =>
      import(/*webpack:"rightsingle" */ "../rightAssembly/rightsingle"),
    rightmultiple: () =>
      import(/*webpack:"rightmultiple" */ "../rightAssembly/rightmultiple"),
    rightcompletion: () =>
      import(/*webpack:"rightcompletion" */ "../rightAssembly/rightcompletion"),
    rightfield: () =>
      import(/*webpack:"rightfield" */ "../rightAssembly/rightfield"),
    rightnumber: () =>
      import(/*webpack:"rightfield" */ "../rightAssembly/rightnumber"),
    rightimgsingle: () =>
      import(/*webpack:"rightfield" */ "../rightAssembly/rightimgsingle"),
    rightname: () =>
      import(/*webpack:"rightname" */ "../rightAssembly/rightname"),
    rightgender: () =>
      import(/*webpack:"rightgender" */ "../rightAssembly/rightgender"),
    righteducation: () =>
      import(/*webpack:"righteducation" */ "../rightAssembly/righteducation"),
    rightage: () => import(/*webpack:"rightage" */ "../rightAssembly/rightage"),
    rightiphone: () =>
      import(/*webpack:"rightiphone" */ "../rightAssembly/rightiphone"),
    rightemail: () =>
      import(/*webpack:"rightiphone" */ "../rightAssembly/rightemail"),
    rightmobile: () =>
      import(/*webpack:"rightiphone" */ "../rightAssembly/rightmobile"),
    rightselect: () =>
      import(/*webpack:"rightiphone" */ "../rightAssembly/rightselect"),
    rightbirthday: () => import(/** */ "../rightAssembly/rightbirthday"),
    // 拖动的组件
  },
  created() {
    // 通过 this.$root.imgsurl 拿到main.js定义的图片拼接路径
    // 然后赋值
    this.imgsUrl = this.$root.imgsurl;
    // console.log(this.imgsUrl)
  },
};
</script>
<style>
@import "../../../assets/css/questionnaire/edit.css";
.form-head-show {
  padding: 15px 28px 15px 28px;
  text-align: left;
  margin-bottom: 25px;
  width: 30vw;
  margin: 0 auto;
}
/*点击事件,可以修改的样式*  动态绑定*/
.bor {
  border: 1px dashed black;
  background-color: rgba(231, 233, 235, 0.5);
}
.form-head-show:hover {
  background-color: rgba(231, 233, 235, 0.5);
  cursor: pointer;
}
.form-head-show > div > i:hover {
  color: lightskyblue;
}
</style>